<template>
   <div class="custom-tree-node-container box">
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :props="{ class: customNodeClass }"
    />
  </div>
   <div class="button">
   <el-button>清空</el-button>
   <el-button type="primary">保存</el-button>
 </div>

  </template>
  
  <script setup lang="ts">
  import * as api from "../../request/api";
  import { reactive, ref } from "vue";
  import { useRoute } from "vue-router";
  import type Node from 'element-plus/es/components/tree/src/model/node'
  let Roleid: any = useRoute().query;
  console.log(Roleid);
  

  
  const dataRole: any = reactive([
 
  ]);

  let msg = ref(<any>[])
    api.adminA.getresources().then((res) =>{
 // console.log(res);
 let id = 10
 let child: never[] = [] //商品模块
 let child2: never[] = [] //订单模块
 let child3: never[] = [] //营销模块
 let child4: never[] = [] //权限模块
 let child5: never[] = [] //内容模块
 let child6: never[] = [] //其他模块
 function Rolemodule(e: number,i: number,child: { id: any; label: any; }[]){ //处理数据的函数
   if(res[i].categoryId==e){
     child.push({
       id : res[i].id,
       label : res[i].name
     })
    }
 }


 for(let i=0;i<res.length;i++){
   Rolemodule(1,i,child)
   Rolemodule(2,i,child2)
   Rolemodule(3,i,child3)
   Rolemodule(4,i,child4)
   Rolemodule(5,i,child5)
   Rolemodule(6,i,child6)
 }
 let z=[{
       id : id++,
       label : '商品模块',
       isPenultimate: true,
       children:child
     },
     {
       id : id++,
       label : '订单模块',
       isPenultimate: true,
       children:child2
     },
     {
       id : id++,
       label : '营销模块',
       isPenultimate: true,
       children:child3
     },
     {
       id : id++,
       label : '权限模块',
       isPenultimate: true,
       children:child4
     }
     ,{
       id : id++,
       label : '内容模块',
       isPenultimate: true,
       children:child5
     },
     {
       id : id++,
       label : '其他模块',
       isPenultimate: true,
       children:child6
     }
   
   ]
 msg.value = z
 console.log(msg.value);
 
})
interface Tree {
 id: number
 label: string
 isPenultimate?: boolean
 children?: Tree[]
}

const customNodeClass = (data: Tree, node: Node) => {
  if (data.isPenultimate) {
    return 'is-penultimate'
  }
  return null
}

const data: Tree[] = msg
  
  const allrole = async () => {
    const res = await api.adminA.getresourcesRole(Roleid.id);
    return res;
  };
  allrole();
  </script>
  
  <style>
  .el-tree-node.is-expanded.is-penultimate > .el-tree-node__children {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 20px;
}
  .el-tree-node.is-expanded.is-penultimate > .el-tree-node__content {
 height: 50px;
 background-color: #f2f6fc;
}
.is-penultimate > .el-tree-node__children > div {
  width: 50%;
}
.box {
  width: 95%;
  height: 115%;
  padding: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
  border: 1px solid #ebeef5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.button {
  margin-top: -80px;
  text-align: center;
}
.el-tree {
  padding: 20px;
  height: 500px;
  line-height: 500px;
}
  </style>
  